<!--  -->
<template>
  <div class="customform">
    <el-form
      ref="form"
      :inline="true"
      :model="formInline"
      class="form-inline"
      :label-width="labelWidth"
      @submit.native.prevent
    >
      <slot></slot>
      <i v-if="showIcon && !expand" class="el-icon-arrow-down fixIcon" @click="expandToogle"></i>
      <i v-if="showIcon && expand" class="el-icon-arrow-up fixIcon" @click="expandToogle"></i>
      <el-form-item
        class="btnItem"
        :style="{width:btnOnLine ? '100%' : 'auto',flex:btnOnLine ? 'none' : '1'}"
        v-if="showAction"
      >
        <slot name="btnBoxHeader"></slot>
        <el-tooltip class="item" effect="dark" :content="tooltipContent" placement="bottom">
          <el-button v-if="exportBtn" @click="exportHandler">条件导出</el-button>
        </el-tooltip>
        <el-button @click="$emit('resetTable')">重置</el-button>
        <el-button
          class="btn"
          type="primary"
          @click="$emit('onSubmit', formInline)"
          native-type="submit"
        >查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    formInline: Object,
    exportBtn: {
      type: Boolean,
      default: false
    },
    showAction: {
      type: Boolean,
      default: true
    },
    tooltipContent: {
      type: String,
      default: "导出数据之前需要先选择审核时间"
    },
    labelWidth: {
      type: String,
      default: "80px"
    },
    //搜索按钮是否独占一行
    btnOnLine: {
      type: Boolean,
      default: false
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      showIcon: false,
      expand: false,
      bodyHeight: "auto",
      originDefault: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initial() {
      // return;
      this.originDefault = this.$slots.default;
      // console.log("this.originDefault", this.originDefault);

      let len = this.originDefault.length;
      if (this.btnOnLine) {
        //此时按钮独占一行 判断筛选文本框是否为两行
        if (Math.ceil(len / 5) >= 2) {
          this.showIcon = true;
        }
      } else {
        //此时按钮不独占一行
        if (Math.ceil(len / 5) > 2) {
          // 超过两行
          this.showIcon = true;
        }
      }

      if (this.showIcon) {
        if (!this.expand) {
          setTimeout(() => {
            //首先折叠
            for (var i = 5; i < this.originDefault.length; i++) {
              this.$slots.default[i].elm.style.display = "none";
            }
          }, 0);
        }
        this.$emit("expandChange", this.expand);
      }
    },
    exportHandler() {
      this.$emit("exportHandler");
    },
    expandToogle() {
      this.expand = !this.expand;
      this.$emit("expandChange", this.expand);
      
      if (!this.expand) {
        //折叠
        for (let i = 5; i < this.originDefault.length; i++) {
          this.$slots.default[i].elm.style.display = "none";
        }
      } else {
        //展开
        for (let i = 5; i < this.originDefault.length; i++) {
          this.$slots.default[i].elm.style.display = "flex";
        }
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initial();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.customform {
  position: relative;
  transition: height 0.5s ease-in-out;
  .el-form {
  }
  .fixIcon {
    position: absolute;
    top: 10px;
    right: 0px;
    cursor: pointer;
  }
}

::v-deep .form-inline {
  display: flex;
  flex-wrap: wrap;

  .btnItem {
    // flex: 1;
    display: flex;
    justify-content: flex-end;
    // width: 100% !important;

    .el-form-item__content {
      width: auto !important;
    }

    .btn {
      margin-right: 22px;
    }
  }

  .el-form-item__label {
    // min-width: 80%;
    overflow: hidden;
    white-space: nowrap;
  }

  .el-date-editor--daterange {
    width: 100%;

    .el-range-separator {
      width: 10% !important;
    }
  }

  .el-input,
  .el-select {
    width: 100%;
  }

  .el-form-item {
    display: flex;
    width: 20%;
    margin-right: 0;

    .el-form-item__content {
      width: 70%;
    }
  }
}

::v-deep .el-range-separator {
  padding: 0;
}
</style>